<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { List, Col, Row, showNotify, Loading, Collapse, CollapseItem } from 'vant';
const activeNames = ref(['']);
const currentPage = ref(1)
const dataList = ref([]);
const loading = ref(false);
const finished = ref(false);
onMounted(() => {
    loading.value = true;
    getReserveList(1, 25, '');
})
const getReserveList = (page, size, text) => {
    let url = 'https://eid.youerp.cn/api/ajax.ashx?oper=Web_GetReserveClient';
    const params = { page: page, size: size, text: text }
    axios.get(url, {
        params
    }).then(function (res) {
        console.log(res);
        try {
            if (res.status == '200') {
                loadList(res.data.list);
                loading.value = false;
            } else {
                showNotify({
                    type: 'warning',
                    message: '系统错误',
                    position: 'center',
                });
            }
        } catch (error) {
            console.log(error)
            showNotify({
                type: 'warning',
                message: '系统错误',
                position: 'center',
            });
        }
    }).catch(function (error) {
        console.log(error);

        showNotify({
            type: 'warning',
            message: '系统错误:' + error,
            position: 'center',
        });
    });
};
const loadList = (list) => {
    console.log(list);
    list.forEach((x, i) => {
        let j = i + 1;
        list[i].xh = j;
    })
    dataList.value = list;
}
</script>

<template>
    <div class="main ">
        <div class="">

            <div class="list">
                <van-collapse v-model="activeNames">
                    <div v-for="(item, idx) in dataList" v-key="idx">
                        <van-collapse-item :title="item.name" :name="item.xh">
                            <template #title>
                                <div class="dflex-b">
                                    <span>{{ item.name }}</span>
                                    <b>{{ item.phone }}</b>
                                </div>
                            </template>
                            <span style="color: #000;">
                                需求描述: </span>
                                {{ item.describe || '未填写' }}
                        </van-collapse-item>
                    </div>
                </van-collapse>
                <div class="title" style="display: none;">
                    <van-row>
                        <van-col span="6">姓名</van-col>
                        <van-col span="8">联系方式</van-col>
                        <van-col span="8">公司</van-col>
                    </van-row>
                </div>
                <!-- <div v-for="(item, idx) in dataList" v-key="idx">
                    <van-row>
                        <van-col span="6">{{ item.name }}</van-col>
                        <van-col span="9">{{ item.phone }}</van-col>
                        <van-col span="9">
                            <span style="font-size: 13px;color: #666;">
                                {{ item.company }}</span>
                        </van-col>
                    </van-row>
                </div> -->
            </div>
        </div>
        <div class="tabbar" style="display: none;">
            <van-pagination v-model="currentPage" :total-items="125" :show-page-size="3" force-ellipses />
        </div>
        <template v-if="loading">
            <div class="loading">
                <van-loading type="spinner" color="#1989fa" />
            </div>
        </template>
    </div>
</template>
<style scoped lang="less">
.title {
    background-color: #51D0D0;
    color: #fff;
    text-align: center;
}

.van-row {
    align-items: center;
    border-bottom: 1px solid #e2dfdf;
}

.van-col {
    padding: 8.5px 7px;
    line-height: 1.25;
}

.loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tabbar {
    position: fixed;
    bottom: 0;
    width: 100vw;
    padding: 8.5px 0;
    background-color: #f8f8f8;
}
</style>